<template>
  <div v-show="visible" id="cesium-container"></div>
</template>

<script setup>
  import {defineProps, onMounted} from 'vue'
  import Cesium from './cesium.js'
  import {init, flyTo} from './cesium.js'
  // import 'cesium-tdt'

  defineProps({
    visible: {
      type: Boolean,
      default: false,
    },
  })

  onMounted(() => {
    // Initialize the Cesium Viewer in the HTML element with the "cesiumContainer" ID.
    const viewer = init('cesium-container')

    // // 添加白模
    // const tileset = viewer.scene.primitives.add(
    //   new Cesium.Cesium3DTileset({
    //     // url: Cesium.IonResource.fromAssetId(96188),
    //     url: 'Tileset/tileset.json',
    //     modelMatrix: Cesium.Matrix4.IDENTITY,
    //   })
    // )

    // tileset.readyPromise
    //   .then(() => {
    //     const boundingSphere = tileset.boundingSphere
    //     viewer.camera.viewBoundingSphere(
    //       boundingSphere,
    //       new Cesium.HeadingPitchRange(0.0, -0.5, boundingSphere.radius * 2)
    //     )
    //     viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY)
    //   })
    //   .otherwise(error => {
    //     throw error
    //   })

    // // 初始化地址
    // flyTo(viewer, {
    //   lng: 104.5,
    //   lat: 33.5,
    //   alt: 7000000,
    //   speed: 2,
    // })

    // viewer.entities.add({
    //   name: 'Red box with black outline',
    //   position: Cesium.Cartesian3.fromDegrees(104.5, 33.5, 300000.0),
    //   box: {
    //     dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
    //     material: Cesium.Color.RED.withAlpha(0.3),
    //     outline: true,
    //     outlineColor: Cesium.Color.BLACK,
    //   },
    // })

    // viewer.entities.add({
    //   name: 'Red ellipse on surface',
    //   position: Cesium.Cartesian3.fromDegrees(104.5, 33.5),
    //   ellipse: {
    //     semiMinorAxis: 250000.0,
    //     semiMajorAxis: 400000.0,
    //     material: Cesium.Color.RED.withAlpha(0.6),
    //   },
    // })

    // viewer.entities.add({
    //   name: 'Blue translucent, rotated, and extruded ellipse with outline',
    //   position: Cesium.Cartesian3.fromDegrees(104.5, 33.5, 100000.0),
    //   ellipse: {
    //     semiMinorAxis: 150000.0,
    //     semiMajorAxis: 300000.0,
    //     extrudedHeight: 200000.0,
    //     rotation: Cesium.Math.toRadians(45),
    //     material: Cesium.Color.BLUE.withAlpha(0.3),
    //     outline: true,
    //   },
    // })

    // viewer.zoomTo(viewer.entities)

    // const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)

    // // 监听双击事件，双击跳转
    // handler.setInputAction(e => {
    //   const {position} = e
    //   console.log(position)
    //   // 弧面
    //   const ellipsoid = viewer.scene.globe.ellipsoid
    //   // 笛卡尔坐标
    //   const cartesian3 = viewer.scene.globe.pick(viewer.camera.getPickRay(position), viewer.scene)
    //   // 根据笛卡尔坐标获取到弧度
    //   const cartographic = ellipsoid.cartesianToCartographic(cartesian3)
    //   console.log(Cesium.Math.toDegrees(cartographic.longitude), Cesium.Math.toDegrees(cartographic.latitude))
    //   flyTo(viewer, {
    //     lng: Cesium.Math.toDegrees(cartographic.longitude), // 根据弧度获取到经度
    //     lat: Cesium.Math.toDegrees(cartographic.latitude), // 根据弧度获取到纬度
    //     alt: 1000, // 海拔高度
    //     pitch: -60, // 仰俯角
    //   })
    // }, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK)

    // // 监听滚动事件
    // handler.setInputAction(e => {
    //   console.log(e, viewer)
    //   console.log(viewer.camera.distanceToBoundingSphere(viewer.scene))
    //   view.camera.lookAt(
    //     null,
    //     new Cesium.HeadingPitchRange(Cesium.Math.toRadians(50.0), Cesium.Math.toRadians(-20.0), range)
    //   )
    // }, Cesium.ScreenSpaceEventType.WHEEL)

    // //旋转
    // viewer.clock.multiplier = 25 //速度
    // viewer.clock.shouldAnimate = true
    // let previousTime = viewer.clock.currentTime.secondsOfDay
    // function onTickCallback() {
    //   const spinRate = 1
    //   const currentTime = viewer.clock.currentTime.secondsOfDay
    //   const delta = (currentTime - previousTime) / 1000
    //   previousTime = currentTime
    //   viewer.scene.camera.rotate(Cesium.Cartesian3.UNIT_Z, -spinRate * delta)
    // }
    // viewer.clock.onTick.addEventListener(onTickCallback)
    // viewer.clock.onTick.removeEventListener(onTickCallback)
  })
</script>

<style scoped>
  #cesium-container {
    width: 100%;
    height: 100%;
  }
</style>
